<template>
  <div class="border-box">
    <div class="data-area">
      <div class="left">
        <Left />
      </div>
      <div class="centre">
        <div class="top">
          <Top />
        </div>
        <div class="bottom">
          <Bottom />
        </div>
      </div>
      <div class="right">
        <Right />
      </div>
    </div>
  </div>
</template>

<script>
import Top from './centreTop.vue';
import Left from './left.vue';
import Right from './right.vue';
// import LeftNeighbor from './leftNeighbor.vue';
// import RightNeighbor from './rightNeighbor.vue';
import Bottom from './centreBottom.vue';
export default {
  name: 'DafosiControlWebIndex',

  components: {
    Left,
    Right,
    Bottom,
    Top
  },

  props: {
    // 头部发光背景
    bg: {
      type: String,
      default: require('../../../assets/img/decisionAnalysis/border_box.png')
    }
  },

  data() {
    return {};
  },

  computed: {
    day30List() {
      const day30List = this.formatChartData(orderKeys, this.dayList);
      return day30List.map((item, index) => {
        return {
          x: item.x,
          y: item.y,
          itemStyle: {
            color: this.color3D[index]
          }
        };
      });
    }
  },

  mounted() {},

  methods: {}
};
</script>

<style lang="scss" scoped>
.border-box {
  box-sizing: border-box;
  height: 62.5625rem;
  width: 120rem;
  overflow-x: auto;
  position: relative;
}
.data-area {
  width: 100%;
  padding: 0rem 0.8rem;
  display: grid;
  grid-gap: 1.25rem;
  grid-template-areas: "left centre right";
  .left {
    grid-area: left;
    width: 28.3125rem;

  }
  .centre {
    display: grid;
    grid-area: centre;
    .top {
      height: 32.4375rem;
    }
    .bottom {

    }
  }
  .right {
    grid-area: right;
    width: 28.3125rem;
  }
}
</style>
